<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img{width:30px;}
        input[type=number]{width:50px;}
    </style>
</head>
<body>
    <h2>这是购物车，<a href="./2商品列表.html">继续购物</a></h2>

    <table border="1" width="700" align="center">
        <thead>
            <tr>
                <th>选中</th>
                <th>图片</th>
                <th>名字</th>
                <th>数量</th>
                <th>单价</th>
                <th>小计</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="2"><input type="checkbox">全选</td>
                <td align="right">总数量</td>
                <td>0</td>
                <td>总价</td>
                <td>0</td>
                <td>删除选中</td>
            </tr>
        </tfoot>
    </table>

</body>
<script>

    class Cart{
        constructor(){
            this.tbody = document.querySelector("tbody")
            // 获取本地存储数据
            this.getLocal();

            this.addEvent();
        }
        getLocal(){
            // 解析
            const localData = localStorage.getItem("goods");
            this.localData = localData ? JSON.parse(localData) : [];
            // 渲染购物车布局
            this.render();
        }
        render(){
            let str = ""
            // 遍历数据
            this.localData.forEach(val=>{
                // 使用字符串拼接页面结构
                str += `<tr myid="${val.id}">
                            <td><input type="checkbox"></td>
                            <td><img src="${val.img}"></td>
                            <td>${val.name}</td>
                            <td><input class="num" type="number" value="${val.num}"></td>
                            <td>${val.price}</td>
                            <td>${val.price * val.num}</td>
                            <td class="del">删除</td>
                        </tr>`
            })
            // 设置到指定容器
            this.tbody.innerHTML = str;
        }
        addEvent(){
            const that = this;
            this.tbody.addEventListener("input", function(eve){
                if(eve.target.className === "num"){
                    // 获取数字框内的数字
                    that.num = eve.target.value-0;
                    // 获取当前数字框对应商品的id
                    that.id = eve.target.parentNode.parentNode.getAttribute("myid")
                    // 准备修改本地存储
                    that.setLocal();
                }
            })

            this.tbody.addEventListener("click", function(eve){
                if(eve.target.className === "del"){
                    // 获取当前删除对应商品的id
                    that.id = eve.target.parentNode.getAttribute("myid")
                    // 删除DOM结构
                    eve.target.parentNode.remove();
                    // 准备修改本地存储
                    that.setLocal2();
                }
            })
        }
        setLocal(){
            let i=null;
            // 先遍历本地存储中数据，根据当前id找到当前商品数据
            const flag = this.localData.some((val,idx)=>{
                i = idx;
                return val.id === this.id;
            })
            if(flag){
                // 修改数量
                this.localData[i].num = this.num;
                // 重新存回去，覆盖原数据
                localStorage.setItem("goods", JSON.stringify(this.localData));
            }
        }
        setLocal2(){
            let i=null;
            const flag = this.localData.some((val,idx)=>{
                i = idx;
                return val.id === this.id;
            })
            if(flag){
                this.localData.splice(i, 1);
                localStorage.setItem("goods", JSON.stringify(this.localData));
            }
        }
    }

    new Cart;
    
</script>
</html>